<template>
<div class="content-list">
  <div class="cl-left">
    <recommend-view>
        <template v-slot:title>
          <div class="detail-f">
            <h1>{{blog.blogTitle}}</h1>
            <div class="detail">
              <ul>
                <li>
                  <img src="~assets/img/item/denglu.svg" alt="">
                  <p>卖鱼强</p>
                </li>
                <li>
                  <img src="~assets/img/item/shijian.svg" alt="">
                  <P>{{blog.createTime}}</P>
                </li>
                <li>
                  <img src="~assets/img/item/ai-eye.svg" alt="">
                  <P>{{blog.blogViews}}</P>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <template v-slot:content>
          <p v-html="blog.blogContent" class="essay-content">{{}}</p>
          <message-box/>
          <remark-head/>
          <new-message/>
        </template>
      </recommend-view>
  </div>
  <div class="cl-right">
    <recommend-view>
        <template v-slot:title>
          <span class="recom-span">频道点击排行</span>
        </template>
        <template v-slot:content>
          <article-item />
          <article-item />
          <article-item />
          <article-item />
          <article-item />
        </template>
      </recommend-view>
  </div>
</div>
</template>

<script>
import {request} from 'network/request'
import RecommendView from "components/content/recommendview/RecommendView";
import ArticleItem from "components/content/article/ArticleItem";
import MessageBox from 'components/content/messagebox/MessageBox'
import NewMessage from 'components/content/messagebox/NewMessage'
import RemarkHead from 'components/content/comment/RemarkHead'

export default{
  name: 'essay',
  components: {
    RecommendView,
    ArticleItem,
    MessageBox,
    NewMessage,
    RemarkHead
  },
  data() {
    return {
      blog: {
        //标题
        blogTitle: '',
        //摘要
        blogRemark:'',
        //文章内容
        blogContent:'',
        //观看数
        blogViews:0,
        //创建时间
        createTime:null
      }
    }
  },
  mounted(){
    this.getBlogById(this.$route.params.id)
  },
  methods:{
    //初始化文章数据
    getBlogById(id){
      //检查数据合法性
      if(id == null || id === ''){
        this.$message.error('请求文章数据失败');
      }
      request({
        url: '/blog/getBlogById',
        method: 'get',
        params: {id : id}
      }).then(response => {
        console.log(response);
        this.blog.blogTitle = response.data.blogTitle;
        this.blog.blogRemark = response.data.blogRemark;
        this.blog.blogContent = response.data.blogContent;
        this.blog.blogViews = response.data.blogViews;
        this.blog.createTime = response.data.createTime;
      }).catch(error => {
        this.$message.error('请求文章数据失败');
      })
    }
  }
}
</script>

<style scoped>
.item-text{
  width: 65%;
  padding-left: 10px;
}
.item-text p{
  width: 100%;
  max-height: 40px;
  overflow: hidden;
  white-space: pre-wrap;
}
.item-text span{
  font-size: 12px;
  color: #a1a1a1;
  padding-right: 10px;
  margin-top:10px ;
  display: block;
}
.essay-content{
  text-align: center;
}
.detail-f{
  position: relative;
}
.detail {
  position: absolute;
  left: 20px;
  top: 50px;
}
.detail img {
  width: 14px;
  vertical-align: middle;
}
.detail p {
  display: inline-block;
  font-size: 13px;
  padding-left: 4px;
}
.detail ul li {
  float: left;
  padding-right: 20px;
}
</style>
